<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚服务-发布需求</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">

</head>
<style>
    .el-tabs__nav {
        background-color: #fafafa;
    }
    
    .el-tabs__active-bar {
        background-color: #3cb36f;
        top: 0;
        height: 4px;
    }
    
    .el-tabs__item {
        height: 74px;
        line-height: 74px;
        width: 400px;
    }
    
    .el-tabs__content {
        background-color: #fff;
    }
    
    .el-tabs__header {
        margin: 0;
    }
</style>

<body>
    <div class="app-wrap" v-cloak id="jfw_fabuxuqiu">
        <header-top></header-top>
        <header-search-global type="服务"></header-search-global>
        <div class="bg-gray">
            <div class="jfw-xuqiu-top">
                <p class="line1">你的特色需求 我来加工定制</p>
                <p class="line2">
                    <span><i class="icon-jfw-xuqiu x1"></i>15000家工厂为您服务</span>
                    <span><i class="icon-jfw-xuqiu x2"></i>快速响应，无需苦等</span>
                    <span><i class="icon-jfw-xuqiu x3"></i>平台保障，违约赔付</span>
                </p>
            </div>
            <div class="container mt-74 mb-60">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane name="1">
                        <div class="jfw-tab-item" :class="{'active':activeName==1}" slot="label">
                            <span class="jfw-tab-ibg"><i class="icon-qianbi"></i></span> 找设计
                        </div>
                        <el-form :model="demand" :rules="rules" ref="demand" :label-position="labelPosition" class="demo-ruleForm">
                        <br><br>
                        <!-- 找设计需求内容 -->
                        <div class="jfw-tab-content">
                            <el-form-item label="地区要求" required>
                            <div class="diqu-group">
                                <button type="button" :class="{'active':demand.area==item.number}" @click="chooseDiqu(item.number,item.name)" v-for="item in area" :value="item.number">{{item.name}}</button>
                            </div>
                            </el-form-item>
                            <el-form-item label="订单有效截止日期" required>
                                <el-form-item prop="deadline" >
                                    <el-date-picker type="date"  v-model="demand.deadline" placeholder="选择日期"></el-date-picker>
                                </el-form-item>
                            </el-form-item>

                            <p class="stitle">上传图片说明，方便获取更优质服务：</p>
                            <div>
                                <common-upimg :preimg="logoUrl" :testoption="{maxlength:3}"></common-upimg>
                            </div>
                            <p class="stitle">详细说明：</p>
                            <textarea v-model="demand.describe" placeholder="描述具体服务内容（200字以内）"></textarea>
                            <div class="fabu-wrap">
                                <el-button type="primary" @click="submitForm('demand',1)">发布</el-button>
                            </div>
                            <!-- 右侧悬浮块 -->
                            <div class="right-float-wrap">
                                <div class="top">
                                    <i class="icon-jfw-feiji"></i>
                                    <p class="biaoti">Michael的设计需求</p>
                                </div>
                                <div class="seperate"></div>
                                <div class="bottom">
                                    <p class="line">
                                        <span class="tag">地区要求</span>
                                        <span >{{demand.diquName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">截止日期</span>
                                        <span>{{demand.deadline | date}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane name="2">
                        <div class="jfw-tab-item" :class="{'active':activeName==2}" slot="label">
                            <span class="jfw-tab-ibg"><i class="icon-jiandao"></i></span> 找打样
                        </div>
                        <el-form :model="demand" :rules="rules" ref="demand" :label-position="labelPosition" class="demo-ruleForm">
                        <br><br>
                        <!-- 找打样需求内容 -->
                        <div class="jfw-tab-content">
                            <el-form-item label="地区要求" required>
                                <div class="diqu-group">
                                    <button type="button" :class="{'active':demand.area==item.number}" @click="chooseDiqu(item.number,item.name)" v-for="item in area" :value="item.number">{{item.name}}</button>
                                </div>
                            </el-form-item>
                            <el-form-item label="订单有效截止日期" required>
                                <el-form-item prop="deadline" >
                                    <el-date-picker type="date"  v-model="demand.deadline" placeholder="选择日期"></el-date-picker>
                                </el-form-item>
                            </el-form-item>

                            <p class="stitle">上传图片说明，方便获取更优质服务：</p>
                            <div>
                                <common-upimg :preimg="logoUrl" :testoption="{maxlength:3}"></common-upimg>
                            </div>
                            <p class="stitle">详细说明：</p>
                            <textarea v-model="demand.describe" placeholder="描述具体服务内容（200字以内）"></textarea>
                            <div class="fabu-wrap">
                                <el-button type="primary" @click="submitForm('demand',2)">发布</el-button>
                            </div>
                            <!-- 右侧悬浮块 -->
                            <div class="right-float-wrap">
                                <div class="top">
                                    <i class="icon-jfw-feiji"></i>
                                    <p class="biaoti">Michael的设计需求</p>
                                </div>
                                <div class="seperate"></div>
                                <div class="bottom">
                                    <p class="line">
                                        <span class="tag">地区要求</span>
                                        <span>{{demand.diquName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">截止日期</span>
                                        <span>{{demand.deadline | date}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane name="3">
                        <div class="jfw-tab-item" :class="{'active':activeName==3}" slot="label">
                            <span class="jfw-tab-ibg"><i class="icon-cloth"></i></span> 找款型
                        </div>
                        <el-form :model="demand" :rules="rules" ref="demand" :label-position="labelPosition" class="demo-ruleForm">
                        <br><br>
                        <!-- 找款型需求内容 -->
                        <div class="jfw-tab-content">
                            <el-form-item label="地区要求" required>
                                <div class="diqu-group">
                                    <button type="button" :class="{'active':demand.area==item.number}" @click="chooseDiqu(item.number,item.name)" v-for="item in area" :value="item.number">{{item.name}}</button>
                                </div>
                            </el-form-item>

                            <el-form-item label="订单有效截止日期" required>
                                <el-form-item prop="deadline" >
                                    <el-date-picker type="date"  v-model="demand.deadline" placeholder="选择日期"></el-date-picker>
                                </el-form-item>
                            </el-form-item>

                            <p class="stitle">上传图片说明，方便获取更优质服务：</p>
                            <div>
                                <common-upimg :preimg="logoUrl" :testoption="{maxlength:3}"></common-upimg>
                            </div>
                            <p class="stitle">详细说明：</p>
                            <textarea v-model="demand.describe" placeholder="描述具体服务内容（200字以内）"></textarea>
                            <div class="fabu-wrap">
                                <el-button type="primary" @click="submitForm('demand',3)">发布</el-button>
                            </div>
                            <!-- 右侧悬浮块 -->
                            <div class="right-float-wrap">
                                <div class="top">
                                    <i class="icon-jfw-feiji"></i>
                                    <p class="biaoti">Michael的设计需求</p>
                                </div>
                                <div class="seperate"></div>
                                <div class="bottom">
                                    <p class="line">
                                        <span class="tag">地区要求</span>
                                        <span>{{demand.diquName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">截止日期</span>
                                        <span>{{demand.deadline | date}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <common-footer></common-footer>
        </div>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script>
        jfw_fabuxuqiu();
    </script>
</body>

</html>